<!--通用search搜索页面  -->
<template>
  <div class="page_search">
    <base-form :formConfig="searchFormConfig" v-model="formaDataModel">
      <template #header>
        <div class="title">
          高级检索
        </div>
      </template>
      <template #footer>
        <div class="footer_btns">
          <el-button type="primary" size="small" icon="el-icon-search" @click="handleSearch">搜索</el-button>
          <el-button size="small" icon="el-icon-refresh" @click="handleReset">重置</el-button>
        </div>
      </template>
    </base-form>
  </div>
</template>
<script setup lang='ts' >
import { ref, PropType } from "vue"
import { IFormConfig } from '@/base-ui/form';
const props = defineProps({
  searchFormConfig: {
    type: Object as PropType<IFormConfig>,
    required: true
  },
  associateModel: {
    type: Object,
    default: () => { }
  }

})
const emit = defineEmits(['resetBtnClick', 'searchBtnClick', 'update:modelValue'])
// 根据配置文件的 field 动态绑定 属性
const formaDataModelOrigin: any = {}
const formItems = props.searchFormConfig?.formItems ?? []

for (const formItem of formItems) {
  formaDataModelOrigin[formItem.field] = ''

}
let formaDataModel = ref(formaDataModelOrigin)
// 搜索事件
const handleSearch = () => {
  // 存在关联数据查询
  emit('searchBtnClick', formaDataModel.value, props.associateModel)
  formaDataModel.value = {}
}
// 重置按钮事件
const handleReset = () => {
  // 方案1 浅拷贝
  //通过修改formaDataModel.value对应的值 触发 子组件的watch
  //由于子组件对formaDataModel 做了浅拷贝 formaDataModel始终都是 ""
  // 当handleReset事件触发时 在此修改 formaDataModel  触发 子组件的watch 并把最新的值传输过去
  // for (const key in formaDataModelOrigin) {
  //   formaDataModel.value[`${key}`] = formaDataModelOrigin[key]
  // }
  // 方案二通过 手动监听的方式
  clearInput()
  emit('resetBtnClick')
}
const clearInput = () => {
  formaDataModel.value = formaDataModelOrigin
}


</script>
<style lang='less' scoped>
.title {
  text-align: center;
  font-weight: 600;
  line-height: 30px;
  padding: 10px 0;
}

.footer_btns {
  text-align: right;
  position: relative;
  right: 10px;
  bottom: 15px;

}
</style>
